<template>
  <div class="body">
    <!-- 轮播图 -->
    
    <div class="swiper_wrap">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="item in banner"
            :key="item.targetId"
            :style="`background-image:url(${item.pic})`"
          ></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </div>
    </div>
    <div class="radio_wrap">
      <!-- <RadioCategory></RadioCategory> -->

      <div class="rdi_type tp1">
        <div class="rdi_type_title">
          <h3>电台排行榜</h3>
          <span>上升最快</span>
          <span style="margin: 0 10px">|</span>
          <span>最热电台</span>
        </div>
        <ul>
          <li class="type_item" v-for="radio in djRadios" :key="radio.id">
            <router-link to="/radioInfo"><img :src="radio.dj.avatarUrl" alt="" /></router-link>
            <div class="item_con">
              <router-link to="/radioInfo"
                ><span>{{ radio.lastProgramName}}</span></router-link
              >
              <p>{{ radio.desc }}</p>
              <div class="rank">更新时间：{{timer(radio.lastProgramCreateTime)}}</div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 分页器 -->
      <div class="h_page">
        <button
          class="pageBtn"
          @click="pageChange('last')"
          :disabled="current == 1"
        >
          上一页
        </button>
        <button
          :class="{ active: current == index + 1 }"
          @click="pageChange(index + 1)"
          v-for="(num, index) in 5"
          :key="index"
        >
          {{ index + 1 }}
        </button>
        <button
          class="pageBtn"
          @click="pageChange('next')"
          :disabled="current == 5"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { reqRadioTopList, reqRadioBanner,reqOneTypeRadio } from "../../api/index";
import RadioCategory from "./components/RadioCategory.vue";
import Swiper from "swiper";
import moment from "moment"


export default {
  name: "RadioTopList",
  data() {
    return {
      radioTopList: [],
      radioAllList: [],
      current: 1,
      length: 5,
      banner: [],
      djRadios:[],
    };
  },
  components: { RadioCategory },
  async mounted() {
    const result = await reqRadioTopList();
    this.radioAllList = result.toplist;
    this.radioTopList = this.radioAllList.slice(
      20 * (this.current - 1),
      20 * this.current
    );

    const result1 = await reqRadioBanner();
    // console.log(result1);
    this.banner = result1.data;

    console.log("params",this.$route.params);
    const result2=await reqOneTypeRadio(this.$route.params.id)
    this.djRadios=result2.djRadios
  },
  methods: {
    //改变页码
    //1.点击上下页
    pageChange(x) {
      switch (x) {
        case "last":
          this.current -= 1;
          break;
        case "next":
          this.current += 1;
          break;
        default:
          this.current = x;
      }
      this.radioTopList = this.radioAllList.slice(
        20 * (this.current - 1),
        20 * this.current
      );
    },
    timer(time){
      console.log("time",time);
      return moment(time).format('YYYY/MM/DD h:ss')
    }
  },

  watch: {
    banner(val) {
      this.$nextTick(() => {
        //初始化swiper
        var mySwiper = new Swiper(".swiper-container", {
          loop: true, // 循环模式选项
          autoplay: true,
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },

          // 如果需要滚动条
          scrollbar: {
            el: ".swiper-scrollbar",
          },
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  background-color: #f5f5f5;
  .radio_wrap {
    border-left: 1px solid rgb(211, 211, 211);
    border-right: 1px solid rgb(211, 211, 211);
    margin: 0 auto;
    width: 900px;
    padding: 10px 40px;
    background-color: #fff;
    position: relative;

    .rdi_top {
      overflow: hidden;
      margin-top: 10px;
      width: 900px;
      // border: 1px solid black;
      .list {
        width: 426px;
        // border:1px solid red;
        .title {
          height: 42px;
          h3 {
            float: left;
            font-size: 24px;
            font-weight: 500;
          }
          .more {
            float: right;
            margin-top: 14px;
          }
        }
        ul {
          border: 1px solid rgb(226, 226, 226);
          border-top: 2px solid rgb(194, 12, 12);
          li {
            position: relative;
            height: 40px;
            padding: 10px 0;

            .a_img {
              float: left;
              margin: 0 15px 0;
            }
            .a_type {
              position: absolute;
              padding: 0 5px;
              left: 360px;
              top: 30%;
              border: 1px solid rgb(153, 153, 153);
              color: rgb(153, 153, 153);
            }
            .a_edit {
              position: absolute;
              left: 70px;
              top: 30px;
              color: rgb(153, 153, 153);
            }
          }
          li:nth-of-type(even) {
            background-color: rgb(247, 247, 247);
          }
        }
      }
      .list_left {
        float: left;
      }
      .list_right {
        float: right;
      }
    }
    .rdi_type {
      // border: 1px solid red;
      overflow: hidden;
      margin-top: 35px;
      .rdi_type_title {
        border-bottom: 2px solid rgb(186, 35, 0);
        overflow: hidden;
        h3 {
          float: left;
          font-size: 24px;
          font-weight: 500;
          width: 750px;
          margin-bottom: 5px;
        }
        span {
          float: right;
          font-size: 14px;
        }
      }
      ul {
        margin-left: -30px;
        .type_item {
          float: left;
          // border: 1px solid blue;
          width: 435px;
          height: 120px;
          padding: 20px 0;
          margin-left: 30px;
          border-bottom: 1px solid rgb(231, 231, 231);
          img {
            float: left;
            width: 120px;
            height: 120px;
          }
          .item_con {
            margin-left: 140px;
            a {
              display: block;
              margin: 5px 0 20px;
              // height: 20px;
              span {
                font-size: 18px;
                font-weight: 500;
                color: black;
              }
            }
            p {
              color: rgb(153, 153, 153);
              height: 14px;
              overflow: hidden;
            }
            div {
              margin: 8px 0;
            }
          }
        }
      }
    }
    .h_page {
      width: 500px;
      margin: 50px auto;
      text-align: center;
      button {
        margin: 0 5px;
        padding: 4px 8px;
        background-color: #fff;
        border: none;
        border: 1px solid rgb(204, 204, 204);
      }
      .pageBtn {
        background-image: url(https://s2.music.126.net/style/web2/img/button.png?583109334ae4fa5177e964525243e74d);
        background-position: -75px -560px;
      }
      .active {
        background-color: rgb(222, 18, 24);
        color: rgb(255, 255, 255);
      }
    }
  }
  .swiper_wrap {
    widows: 100%;
    background-color: rgba(128, 128, 128, 0.367);
    .swiper-container {
      width: 980px;
      height: 300px;
      margin: 0 auto;
    }
  }
}
</style>
